<template>
  <resize-drawer
    title="编辑外显号"
    @onCloseDraw="closeDraw"
    @onCancelFun="cancelFun"
    @onSave="saveFun"
    :isShowMoreBtn="true"
    :drawer="drawerShow"
    :size="576"
  >
    <template #column>
      <el-form :model="explicitForm" label-width="100px" label-position="top">
        <el-form-item label="外显号">
          <el-input v-model.trim="explicitForm.numbers" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <template #label>
            <span>
              专属外显号
              <span class="form-tip">配置了此号码为专属外显的企业员工</span>
            </span>
          </template>
          <el-select
            v-model="agentIds"
            style="width: 100%"
            placeholder="请选择"
            multiple
            @change="agentChange"
            filterable
            clearable
          >
            <el-option
              v-for="item in bindingEmployeesList"
              :key="item._id"
              :label="`${item.agentName}[${item.agentNumber}]`"
              :value="item._id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
  </resize-drawer>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue'
import resizeDrawer from '@/common/components/resize-drawer/index.vue'
import { updateExplicitNo } from '@app/call-center/apis/number-manage'
import { ElMessage } from 'element-plus'
import mcCache from '@/common/utils/mc-get-cache'
import { commonStore } from '@/common/store/modules/common'
import { deepClone } from '@/common/utils/common'
const commonModule = commonStore()
interface State {
  drawerShow: boolean
  explicitForm: any
  agentIds: any
  agents: any
}
export default defineComponent({
  name: 'editExplicNo',
  components: {
    resizeDrawer
  },
  emits: ['onChange'],
  // ----------------生命周期-----------------------
  setup(props, { emit }) {
    const state: State = reactive({
      drawerShow: false,
      explicitForm: {
        // id: '',
        numbers: [],
        agentDisplayNumbers: [
          {
            addAgentIdList: [],
            deleteAgentIdList: [],
            displayNumber: []
          }
        ]
      },
      agentIds: [],
      agents: []
    })

    const openEditExplicNo = (row: any) => {
      state.drawerShow = true
      state.explicitForm.numbers = [row.number]
      state.agentIds = row.agents
      state.agents = row.agents
    }

    // 关闭抽屉
    const closeDraw = () => {
      state.drawerShow = false
    }

    // 关闭抽屉
    const cancelFun = () => {
      state.drawerShow = false
    }

    const bindingEmployeesList: any = computed(() => {
      return commonModule.publicCache.userCache
    })

    // 选择专属外显数据处理
    const agentChange = (val: any) => {
      // 当选择的agent为空时，代表数据全删除
      if (val && val.length === 0) {
        state.explicitForm.agentDisplayNumbers[0].deleteAgentIdList = state.agents
        state.explicitForm.agentDisplayNumbers[0].addAgentIdList = []
      }
      if (val.length > state.agents.length) {
        const list: any = deepClone(state.agentIds)
        state.agents.forEach((val: any) => {
          if (state.agentIds.includes(val)) {
            const index: any = list.indexOf(val)
            list.splice(index, 1)
          }
        })
        // 选中的agent去除该数据已有的agent得出新加的agent列表
        state.explicitForm.agentDisplayNumbers[0].addAgentIdList = list
        state.explicitForm.agentDisplayNumbers[0].deleteAgentIdList = []
      }
      // 选中的agent去除该数据已有的agent得出减去的agent列表
      if (val.length < state.agents.length) {
        const list1: any = deepClone(state.agents)
        state.agents.forEach((val: any) => {
          if (state.agentIds.includes(val)) {
            const index: any = list1.indexOf(val)
            list1.splice(index, 1)
          }
        })
        // 选中的agent去除该数据已有的agent得出新加的agent列表
        state.explicitForm.agentDisplayNumbers[0].deleteAgentIdList = list1
        state.explicitForm.agentDisplayNumbers[0].addAgentIdList = []
      }
    }

    // 保存
    const saveFun = () => {
      const sendData = {
        ...state.explicitForm
      }
      // 外显号
      sendData.agentDisplayNumbers[0].displayNumber = sendData.numbers[0]
      updateExplicitNo(sendData).then((res) => {
        if (res && res.success) {
          state.drawerShow = false
          ElMessage.success('保存成功')
          emit('onChange')
          mcCache.$updateCache('explicNum', { ...sendData, status: 1 }, 'id', '') // 编辑
        }
      })
    }

    onMounted(async () => {
      await mcCache.$getCache('userCache', 'hasObj')
    })

    return {
      ...toRefs(state),
      openEditExplicNo,
      closeDraw,
      cancelFun,
      saveFun,
      bindingEmployeesList,
      agentChange
    }
  }
})
</script>

<style lang="stylus" scoped></style>
